<template>
    <div class="container">
        <div class="title ver">个人资料</div>
        <div class="head">
            <ElImage :src="conf.server + currentUser.portrait" class="portrait" fit="cover"></ElImage>
            <div class="name">
                {{ currentUser.name }}
            </div>
        </div>
        <div class="line ver">
            <!-- <div class="intro">
                <ElImage :src="conf.server + currentUser.portrait" class="portrait" fit="cover"></ElImage>
                
            </div> -->

            <fieldset class="field">
                <legend class="legend">
                    <span>基本信息</span>
                </legend>
                <div class="item">
                    <div class="attr">名称</div>
                    <div class="content">{{ currentUser.name }}</div>
                </div>
                <div class="item">
                    <div class="attr">学号</div>
                    <div class="content">{{ currentUser.number }}
                        <ElButton @click="changeNumber" link style="text-decoration: underline;float:right;" type="primary">修改学号</ElButton>
                    </div>
                </div>
                <div class="item">
                    <div class="attr">性别</div>
                    <div class="content">
                        <ElIcon>
                            <span v-if="currentUser.gender === 0">
                                <Male />
                            </span>
                            <span v-else>
                                <Female />
                            </span>
                        </ElIcon>
                    </div>
                </div>
                <div class="item">
                    <div class="attr">学校</div>
                    <div class="content">{{ currentUser.school }}<ElButton @click="changeSchool" link
                            style="text-decoration: underline;float:right;" type="primary">切换学校</ElButton>
                    </div>
                </div>
                <!-- <div class="item">
                    <div class="attr"></div>
                    <div class="content"><ElButton @click="changeSchool" link style="text-decoration: underline;" type="primary">切换学校</ElButton></div>
                </div> -->
                <div class="item">
                    <div class="attr">邮箱</div>
                    <div class="content">{{ currentUser.email }}<ElButton link
                            style="text-decoration: underline;float:right;" type="primary">修改密码</ElButton>
                    </div>
                </div>
                <div class="item">
                    <div class="attr">我的选课</div>
                    <div class="content">3</div>
                </div>
                <div class="item">
                    <div class="attr">我的评论</div>
                    <div class="content">2</div>
                </div>
            </fieldset>
        </div>
    </div>

    <el-dialog v-model="dialogVisible" title="选择学校" width="30%">
        <ElForm :label-width="50">
            <ElFormItem label="学校">
                <!-- <ElInput v-model=""></ElInput> -->
                <!-- <el-dropdown style="width: 100%;">
                    <ElInput v-model="search"></ElInput>
                    <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="school in filter" :key="school">{{ school }}</el-dropdown-item>
                    </el-dropdown-menu>
                    </template>
                </el-dropdown> -->
                <el-select v-model="search" filterable>
                    <el-option v-for="school in schools" :key="school" :label="school" :value="school" />
                </el-select>

            </ElFormItem>
        </ElForm>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirm">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogVisible2" title="修改学号" width="30%">
        <ElForm :label-width="50">
            <ElFormItem label="学号">
                <ElInput v-model="number"></ElInput>
                <!-- <el-dropdown style="width: 100%;">
                    <ElInput v-model="search"></ElInput>
                    <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="school in filter" :key="school">{{ school }}</el-dropdown-item>
                    </el-dropdown-menu>
                    </template>
                </el-dropdown> -->
                

            </ElFormItem>
        </ElForm>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取消</el-button>
                <el-button type="primary" @click="confirmNumber">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useClientStore } from '../pinia/stores/client';
import { conf } from '@/utils/conf';
import { schools } from '../shared/types/schools';

let loadingInstance: any
const { currentUser, client } = storeToRefs(useClientStore())
const schools = ref<string[]>()
// const filter = computed(() =>{
//     const exp = new RegExp(search.value)
//     return schools.value?.filter((school) =>{
//         if(exp.test(school)){
//             return true
//         }
//         else{
//             return false
//         }
//     })
// })

const search = ref('')
const dialogVisible = ref(false)
const changeSchool = () => {
    dialogVisible.value = true
}
const confirm = async () => {
    if (!schools.value?.find(s => s === search.value)) {
        ElMessage.warning('不存在的院校')
        return
    }

    const ret = await client.value.callApi('Select/UpdateSchool', {
        school: search.value
    })
    if (ret.isSucc) {
        currentUser.value.school = search.value
        ElMessage.success('选择成功')
        dialogVisible.value = false
    }
}

const number = ref('')
const dialogVisible2 = ref(false)
const changeNumber = () =>{
    dialogVisible2.value = true
}
const confirmNumber = async () => {
    if (!number.value) {
        ElMessage.warning('请输入学号')
        return
    }
    const ret = await client.value.callApi('Select/UpdateNumber', {
        number: number.value
    })
    if (ret.isSucc) {
        currentUser.value.number = number.value
        ElMessage.success('修改成功')
        dialogVisible2.value = false
    }
}

onMounted(async () => {
    loadingInstance = ElLoading.service({
        target: '.container'
    })
    console.log(currentUser.value);
    const ret = await client.value.callApi('Search/SearchSchools', {
        name: ''
    })
    if (ret.isSucc) {
        schools.value = ret.res.schools
    }
    loadingInstance.close()
})
</script>
<style lang="less" scoped>
.container {
    background-color: #f2f2f2;
    padding: 80px 0;
    padding-bottom: 10px;
    height: 100%;
    width: 100%;
    overflow: auto;

    .title {
        height: 60px;
        width: 100%;
        background-color: white;
        position: fixed;
        top: 0;
        z-index: 10;
        line-height: 60px;
        font-size: 20px;
        font-weight: bold;
        padding: 0 30px;
    }

    .head {
        height: 170px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .portrait {
            height: 120px;
            width: 120px;
            border-radius: 50%;
            border: 5px solid white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        
        .name {
                height: 120px;
                /* width: 120px; */
                line-height: 120px;
                text-align: center;
                padding: 0 20px;
                font-size: 30px;
                text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                color: #666666;
                margin-left: 10px;
            }

        .block {
            height: 110px;
            width: 145px;
            background-color: white;
            margin: 0 12px;
            border-radius: 20px;
            box-shadow: 1px 1px 1px #0000000a;
            position: relative;
            padding: 0 20px;



            .count {
                height: 70px;
                font-size: 40px;
                padding-top: 25px;
                line-height: 40px;
                font-weight: bold;
            }

            .param {
                height: 40px;
                line-height: 30px;
                font-size: 13px;
                color: #a2a2a2;
            }
        }
    }

    .line {
        position: relative;
        width: 100%;
        background-color: white;
        padding: 0px 20px;
        padding-top: 30px;
        // height: 500px;
        // display: flex;
        margin-bottom: 30px;

        .intro {
            position: relative;
            margin: 0 auto;
            display: flex;
            height: 120px;
            justify-content: center;
            align-items: center;

        }

        .field {
            position: relative;
            padding: 0.5rem 1rem 0;
            margin: 40px auto 60px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, .95);
            width: 70%;

            .legend {
                span {
                    background: #0fb2fc;
                    display: inline-block;
                    color: #fff;
                    padding: 0.2rem 0.5rem;
                    white-space: nowrap;
                    line-height: 1.5;
                    font-size: 13px;
                }
            }

            .item {
                line-height: 20px;
                padding: 14px;
                font-size: 14px;
                display: flex;
                color: #adadad;

                &:hover {
                    background: rgba(0, 0, 0, .03);
                }

                &:nth-of-type(2n) {
                    background: rgba(0, 0, 0, .01);
                }

                &:last-child {
                    margin-bottom: 20px;
                }

                .attr {
                    flex: 0 0 100px;
                    font-weight: bold;
                }

                .content {
                    flex-grow: 1;
                }
            }
        }

        .header {
            position: absolute;
            top: 20px;
            font-size: 16px;
            color: #a2a2a2;
        }

        .line-chart {
            width: 55%;
        }

        .bar-chart {
            width: 45%;
        }
    }
}

.ver {
    border-bottom: 0.0625rem solid rgb(226, 232, 240);
    border-top: 0.0625rem solid rgb(226, 232, 240);
}
</style>